<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./EventUtil.js"></script>
</head>
</style>

<body>
    <form action="#" id="myForm" >
        <input type="text" placeholder="Your name" required/>
        <input type="number" min="0" max="100" step="5" name="count"/>
        <textarea name="" id="textBox" cols="30" rows="10">Your description...</textarea>
        <input type="email" />
        <button >提交</button>
    </form>
</body>
<script>
    window.onload = function () {
        (function () {
            var myForm = document.getElementById("myForm")
            // 取得表单第一个元素
            var field = myForm.elements[0];

            console.log("表单有多少个字段：" + myForm.length)
            // 动态修改此元素的属性值
            //field.value = "213";
            console.log(field.form === myForm); //true
            //field.disabled=true;
            field.type = "text"


            // 验证表单基本事件 
            // 根据内容是否合法 而添加不同的border样式

            // 获得焦点时 当borderColor不是红色时 将它改为blue
            field.onfocus = function () {
                var event = window.event;
                if (event.target.style.borderColor !== "red") {
                    event.target.style.border = "5px solid blue";
                }

                //在文本框获得焦点时选择其所有的文本  不必一个个的去删除字符
                event.target.select();
            }
            // 失去焦点后 如果当前值为数字字符且不为空 则值为合法 将其改为green
            field.onblur = function () {
                var event = window.event;
                if (!event.target.value || event.target.value.match(/[^\d]/)) {
                    event.target.style.border = "5px solid red";
                } else {
                    event.target.style.border = "5px solid green";
                }
            }

            // 键盘敲入字符时 如果当前值为数字字符且不为空 则值为合法 将其改为green
            field.onkeyup = function () {
                var event = window.event;
                if (!event.target.value || event.target.value.match(/[^\d]/)) {
                    event.target.style.border = "5px solid red";
                } else {
                    event.target.style.border = "5px solid green";
                }
                //console.log("当前输入的值为" + field.value);
            }

            // 选择（select）事件  在用户选择了文本框中的文本时就会触发select事件
            field.onselect = function () {
                console.log("触发选择事件,取得选择的文本是：" + getSelectedText(field));
            }


        })();

        (function () {
            var textBox=document.getElementById("textBox");
            textBox.value="Hello world!";
            selectSomeText(textBox,0,textBox.value.length);
            console.log("自定义取得部分选择的文本："+getSelectedText(textBox)); //"Hello world!"

            selectSomeText(textBox,0,3);
            console.log("自定义取得部分选择的文本："+getSelectedText(textBox)); //"Hel"

            selectSomeText(textBox,4,7);
            console.log("自定义取得部分选择的文本："+getSelectedText(textBox)); //"o w"

             // 选择（select）事件  在用户选择了文本框中的文本时就会触发select事件
             textBox.onselect = function () {
                console.log("触发选择事件,取得选择的文本是：" + getSelectedText(textBox));
            }

            textBox.onpaste=function(){
                var event=window.event;
                var text=EventUtil.getClipboardText(event);
                console.log("触发粘贴事件");
                if(!/^\d*$/.test(text)){
                    console.log("粘贴的数据不是纯数值:"+text);
                }else{
                    console.log("粘贴的数据是纯数值:"+text)
                }

                var other=EventUtil.setClipboardText(event,"这是新粘贴的文本!");
                console.log("设置剪贴板内容："+other);
            }
        })();

        // onChange 事件 
        // input 当前表单字段的焦点失去了且值发生了改变
        // select 当选择不同选项时触发
        function handleChange(ele) {
            console.log("onChange触发:" + ele.value);
        }
        // 重置表单的value
        function resetForm(ele) {
            ele.reset();
        }

        //在文本框获得焦点时选择其所有的文本  不必一个个的去删除字符
        function selectText(ele) {
            ele.select();
        }

        // 取得部分文本  IE8之前 使用document.selection 保存着用户整个文档中选择的文本  因此使用它之前因先创建一个范围
        // 其他浏览器使用 selectionStart、selectionEnd 用户选择文本的范围
        function getSelectedText(textBox) {
            if (typeof textBox.selectionStart === "number") {
                return textBox.value.slice(textBox.selectionStart, textBox.selectionEnd);
            } else if (document.selection) {
                return document.selection.createRange().text;
            }
        }

        //自定义取得部分文本
        //实现了跨浏览器的编程 IE8之前一般格式
        function selectSomeText(textBox, startIndex, stopIndex) {
            if (textBox.setSelectionRange) {
                textBox.setSelectionRange(startIndex, stopIndex);//要取得最后一个字符的索引
            } else if (textBox.createTextRange) { //兼容IE8之前
                var range = textBox.createTextRange();
                range.collapse(true);
                range.moveStart("character", startIndex);
                range.moveEnd("character", stopIndex - startIndex);//相减得到 要取得多少个字符
                range.select();
            }
            // 要想在文本框中看到文本被选择的效果，必须让文本框获得焦点
            textBox.focus();
        }

    }
</script>



</html>